<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>
    <link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>
    <script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
    <script src="js/json2.js"></script>
    <style>
        .info{
            color: green;
            font-weight: bold;
        }
        .error{
            color: red;
            font-weight: bold;
        }

    </style>
    <script>
        $(function(){
            $("input[type=text]").focus(function(){
                $(this).addClass("input_focus");
            }).blur(function(){
                $(this).removeClass("input_focus");
            });

            $(".form_btn").hover(function(){
                    $(this).css("color","red").css("background","#6FB2DB");},
                function(){
                    $(this).css("color","#295568").css("background","#BAD9E3");
                });
        });
        $(function() {
            $("#goodsName").keyup(function () {
                var s = $("#goodsName").val();
                var e = /^[^\s]{2,15}$/;
                if (e.test(s) == false) {
                    $("#regname").html("校验失败，格式错误").removeClass().addClass("error");
                } else {
                    $.ajax({
                        url: "GoodsServlet",
                        type: "post",
                        data: {
                            flag: "checkadd", goodsName: s
                        },
                        success: function (data) {
                            if (data == "1")
                                $("#regname").html("名称已存在").removeClass().addClass("error");
                            if (data == "0")
                                $("#regname").html("名称可用").removeClass().addClass("info");
                        }
                    });
                }
            });
        });

        $(function () {
            $("#sub").click(function () {
                var a=$("label#regname").text();
                var a1="名称可用";
                if(a==a1)
                    return confirm("确认提交吗");
                else return false;
            }) ;
        });
        $(function(){
            $("#bigCateId").change(function(){
                $("#smallCateId").empty();
                if(this.value=="-1"){
                    $("#smallCateId").append("<option>==小分类==</option>");
                }else {
                    var s=this.value;
                    $.ajax({
                        url: "GoodsServlet",
                        type: "post",
                        dataType:"json",
                        data: {
                            flag: "smallc", parentId: s
                        },
                        success: function (data) {
                            $.each(data, function () {
                                var str = "<option value='" + this.id + "'>" + this.cateName + "</option>";
                                $("#smallCateId").append(str);
                            });
                        }
                    });
                }
            });
        });

        function setImagePreview(docObj, localImagId, imgObjPreview, width, height) {
            if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = width;
                imgObjPreview.style.height = height;
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            } else { //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //必须设置初始大小
                localImagId.style.width = width;
                localImagId.style.height = height;
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
    </script>
</head>
<body>
<div class ="div_title">
    <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品添加</span></div>
</div>
<form action="GoodsServlet" method="post" enctype="multipart/form-data">
    <input type="hidden" name="flag" value="add" />
    <table class="edit_table" >
        <tr>
            <td class="td_info">商品名称:</td>	<td class="td_input">
            <input type="text" name="goodsName" id="goodsName" class="txtbox" />
             </td>
            <td><label id="regname">2-20位非空白字符</label></td>
        </tr>
        <tr>
            <td class="td_info">所属分类:</td>	<td>
            大分类：
            <select name="bigCateId" id="bigCateId">
                <option value="">=大分类=</option>
                <c:forEach var="c" items="${blist}">
                    <option value="${c.parentId}">${c.cateName}</option>
                </c:forEach>
            </select>
            小分类：
            <select name="smallCateId" id="smallCateId">
                <option value="">=小分类=</option>
            </select>

        </td>
            <td><label>请指定所属分类</label></td>
        </tr>
        <tr>
            <td class="td_info">计量单位:</td>
            <td>
            <input type="text" id="unit"  name="unit" class="txtbox"/>
            </td>
        </tr>
        <tr>
            <td class="td_info">商品价格:</td>	<td>
            <input type="text" name="price">
        </td>
        </tr>
        <tr>
            <td class="td_info">生产厂商:</td>	<td>
            <input type="text" name="producter">
        </td>
        </tr>
        <tr>
            <td class="td_info">商品图片:</td>
            <td>
                <input type="file" name="pic" id="imgfile" onchange="setImagePreview(this,localimg,preview,'200px','150px')" />
                <div id="localimg" ><img id="preview" alt="请上传图片"  src="GoodsServlet?flag=showPicture&goodsId=${goodsId}" /></div>
            </td>
        </tr>
        <tr>
            <td class="td_info">备注信息:</td>	<td>
            <textarea rows="7" cols="24" name="des" class="txtarea"  ></textarea>

        </tr>

        <tr>
            <td class="td_info"> </td>	<td>
            <input class="form_btn" type="submit" id="sub" value="提交" />
            <input type="reset"  class="form_btn" value="重置" />
            <label>${msg}</label>
        </td>	<td class="info"> &nbsp;</td>
        </tr>
    </table>
</form>
</body>
</html>
